Flexbox 布局实战：轻松实现 ul li 水平两列响应式布局
この記事では、CSS Flexbox レイアウトを利用して、水平方向に2列の ul li レイアウトをシンプルかつ効率的に作成し、さまざまな画面サイズに完全に適応させて、理想的なレスポンシブ効果を実現する方法について詳しく解説します。
一、Flexbox レイアウトの基本
- Flexbox（フレキシブルボックスレイアウト）は、ページレイアウトに使用される強力な CSS モジュールです。
- コンテナ内で要素を柔軟に配置、整列、スペース割り当てを行うことができます。
- 従来のフロートやポジショニングに比べて、Flexbox はよりシンプルで柔軟性があり、予測しやすいレイアウト制御を提供します。
二、ul li 水平2列レイアウトの実装
1. 親要素を Flex コンテナに設定する
displayプロパティをflexまたはinline-flexに設定し、ul 要素を Flex コンテナとして定義します。- 例：
ul { display: flex; }
2. 子要素の配置を制御する
flex-directionプロパティを使用して、子要素 (li) の配置方向を制御します。- 水平2列レイアウトの場合、
flex-direction: row;を設定して、子要素を水平方向に配置します。
3. 折り返しを設定する
- デフォルトでは、Flex コンテナ内の要素はできるだけ1行に表示されます。
flex-wrap: wrap;を使用すると、子要素がスペース不足になった場合に折り返し、2列の効果を実現できます。
4. 子要素の幅を調整する
flex-basis、width、またはflexプロパティを使用して、各 li 要素の幅を制御します。- 2列レイアウトを実現するために、li 要素の幅を
50%以下に設定して、異なる画面サイズでも2列に収まるようにすることをお勧めします。
三、レスポンシブ対応
1. メディアクエリ
- CSS メディアクエリを使用すると、画面サイズに応じて Flex コンテナと子要素のプロパティを調整できます。
- たとえば、小さい画面では
flex-directionをcolumnに設定して、2列レイアウトを1列レイアウトに変更できます。
2. 弾性サイズ
flex-grow、flex-shrink、flex-basisプロパティを使用すると、子要素を使用可能なスペースに応じて自動的にサイズ調整できます。- これにより、さまざまな画面サイズでレイアウトの見た目を良好に保つことができます。
四、コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平2列レスポンシブレイアウト</title>
<style>
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
li {
flex: 1 0 45%; /* 幅を調整してさまざまな画面に適応 */
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
}
@media (max-width: 768px) {
li {
flex-basis: 100%; /* 小さい画面では1列レイアウトに切り替える */
}
}
</style>
</head>
<body>
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
<li>リスト項目 5</li>
<li>リスト項目 6</li>
</ul>
</body>
</html>
以上の手順で、Flexbox レイアウトを利用して、水平2列の ul li レスポンシブレイアウトを簡単に実装できます。Flexbox の強力な機能と柔軟性により、現代の Web ページレイアウトの理想的な選択肢となっています。
Q&A
Q1: Flexbox レイアウトを使用するメリットは何ですか？
A1: Flexbox レイアウトは、従来の方法よりもシンプルで柔軟性があり、レスポンシブ対応が容易であるなど、多くのメリットがあります。要素の配置、整列、スペース割り当てを簡単に行うことができ、さまざまな画面サイズに合わせたレイアウトを効率的に作成できます。
Q2: 2列レイアウトを3列以上に変更するにはどうすればよいですか？
A2: 子要素 (li) の flex-basis または width の値を調整することで、列数を変更できます。たとえば、3列レイアウトの場合は flex-basis: 33.33%; のように設定します。
Q3: Flexbox レイアウトはすべてのブラウザでサポートされていますか？
A3: Flexbox レイアウトは、主要な最新のブラウザで広くサポートされています。ただし、古いブラウザの中にはサポートしていないものもあるため、互換性を確保するために、適切なフォールバックオプションを検討する必要があります。
その他の参考記事:ul li 横並び 2 列